<script setup lang="ts">
import { ref } from 'vue'
import SvgIcon from './SvgIcon.vue'
import ThemeList from './themeList.vue'

const JuejinThemeListgetdata = ref()

const useJuejinThemeListgetdata = () => {
  if (JuejinThemeListgetdata.value) {
    JuejinThemeListgetdata.value.getdata()
  }
}
</script>
<template>
  <div class="list_box hot-theme">
    <p class="title">
      推荐话题
      <span class="refresh" @click="useJuejinThemeListgetdata">
        <SvgIcon size="16" name="ItemHeaderButton" />
        换一换
      </span>
    </p>

    <ThemeList ref="JuejinThemeListgetdata" />

    <a href="/pin/topics" class="moreTopics" target="_blank"
      >查看更多
      <SvgIcon name="LookMoreSvg2" size="12px" />
    </a>
  </div>
</template>
<style scoped lang="scss">
.list_box {
  background-color: #fff;
  border-radius: 2px;
}
.hot-theme {
  margin-bottom: 20px;
}
.title,
.refresh {
  display: flex;
  align-items: center;
}
.title {
  justify-content: space-between;
  line-height: 46px;
  margin: 0 16px !important;
  font-weight: 500;
  font-size: 16px;
  color: #252933;
  border-bottom: 1px solid #e4e6eb;
  margin: 0;
}
.refresh {
  font-size: 12px;
  line-height: 20px;
  text-align: right;
  color: #8a919f;
  cursor: pointer;
  svg {
    margin-right: 4px;
  }
  &:hover {
    color: #1e80ff !important;
  }
}
.moreTopics {
  margin: 0 16px;
  border-top: 1px solid #e4e6eb;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  color: #8a919f;
  svg {
    margin-left: 4px;
  }
}
</style>
